<template>
    <el-dialog class="upload-verify-dialog" :title="_4title" :visible.sync="visible" width="800px" :before-close="_onBeforeDialogClose">
        <div class="flex-center">
            <el-radio-group v-model="filter" size="mini">
                <el-radio-button label="all">全部</el-radio-button>
                <el-radio-button label="unuseable">不符合要求</el-radio-button>
            </el-radio-group>
            <!-- <span>哈哈</span> -->
        </div>
        <el-table :data="_4list" class="margin-t-10" height="300" border size="mini" tooltip-effect="light">
            <el-table-column label="文件名称（可重命名）" show-overflow-tooltip :resizable="false">
                <template slot-scope="{ row }">
                    <el-input ref="file-name" class="file-name" v-bind:class="{ danger: (!row.isSpecialCharOk || !row.isFileNameLenOk) }" size="mini" v-model="row.name" @focus="focus = true;" @blur="focus = false;">
                        <template slot="prepend">
                            <span class="state-text primary">[ {{ row.desc }} ]</span>
                        </template>
                        <template slot="append">{{ row.suffix }}</template>
                    </el-input>
                </template>
            </el-table-column>
            <el-table-column label="类型" width="80" align="center" :resizable="false">
                <template slot-scope="{ row: { isTypeOk: ok } }">
                    <i v-if="ok" class="el-icon-check success"></i>
                    <i v-else class="el-icon-close danger"></i>
                </template>
            </el-table-column>
            <el-table-column label="大小" width="80" align="center" :resizable="false">
                <template slot-scope="{ row: { isSizeOk: ok } }">
                    <i v-if="ok" class="el-icon-check success"></i>
                    <i v-else class="el-icon-close danger"></i>
                </template>
            </el-table-column>
            <el-table-column width="80" align="center" :resizable="false">
                <template slot="header" slot-scope="scope">
                    <span>特殊字符</span>
                    <el-tooltip content="可在文件名称处进行修改" placement="top-end" effect="light">
                        <i class="el-icon-question margin-l-5 light" :data="scope"></i>
                    </el-tooltip>
                </template>
                <template slot-scope="{ row: { isSpecialCharOk: ok } }">
                    <i v-if="ok" class="el-icon-check success"></i>
                    <i v-else class="el-icon-close danger">
                        <i class="el-icon-question margin-l-5 primary"></i>
                    </i>
                </template>
            </el-table-column>
            <el-table-column width="80" align="center" :resizable="false">
                <template slot="header" slot-scope="scope">
                    <span>名称长度</span>
                    <el-tooltip content="可在文件名称处进行修改" placement="top-end" effect="light">
                        <i class="el-icon-question margin-l-5 light" :data="scope"></i>
                    </el-tooltip>
                </template>
                <template slot-scope="{ row }">
                    <i v-if="row.isFileNameLenOk" class="el-icon-check success"></i>
                    <i v-else class="el-icon-close danger"></i>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="50" align="center" :resizable="false">
                <template slot-scope="{ row }">
                    <el-link icon="el-icon-delete-solid" type="danger" :underline="false" @click="_onDelClick(row)"></el-link>
                </template>
            </el-table-column>
        </el-table>
        <span slot="footer">
            <el-button @click="visible = false;" size="small">取 消</el-button>
            <el-button v-if="_count >= 0 && infos.length > _count" type="primary" @click="_onSubmitClick" size="small">{{ _count > 0 ? '仅上传符合要求文件' : '确定上传' }}</el-button>
        </span>
    </el-dialog>
</template>

<script type="text/javascript">

/**
 * @Author hedong [2022-03-08 16:16:25]
 * @Description 上传文件验证结果提示窗口
 */
export default {
    components: {},

    props: {},

    data() {
        return {
            visible: false,
            filter: 'all',
            infos: [],
            focus: false
        }
    },

    computed: {
        _4list() {
            if (this.filter == 'all') return [].concat(this.infos);
            return this.infos.filter(item => {
                return !item.useable;
            })
        },

        _4type() {
            return function (info) {
                if (info instanceof File) return true;
                return
            }
        },

        /**
         * 不符合要求的文件数量
         */
        _count() {
            return this.infos.filter(item => {
                return !item.useable;
            }).length;
        },

        _4title() {
            let count = this._count;
            if (!count) return `共选择了[ ${this.infos.length} ]个文件`;
            if (count == this.infos.length) return `共选择了[ ${this.infos.length} ]个文件，无可上传文件`;
            return `共选择了[ ${this.infos.length} ]个文件, 其中[ ${count} ]个文件[ 不符合 ]要求`;
        }
    },

    watch: {},

    created() { },

    destroyed() { },

    mounted() { },

    methods: {
        /**
         * 关闭验证
         */
        _onBeforeDialogClose(done) {
            if (this.focus) return;
            done();
        },

        /**
         * 点击移除某文件
         */
        _onDelClick(info) {
            let index = this.infos.indexOf(info);
            if (index < 0) return;
            this.infos.splice(index, 1);
        },

        /**
         * 点击提交
         */
        _onSubmitClick() {
            this.resolve && this.resolve(this.infos.filter((item) => {
                return item.useable;
            }))
            this.resolve = undefined;
            this.reject = undefined;
            this.visible = false;
        },

        /**
         * 显示窗口
         */
        show(infos) {
            this.infos = infos;
            this.visible = true;
            return new Promise((resolve, reject) => {
                this.resolve = resolve;
                this.reject = reject;
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.upload-verify-dialog {
    .el-input.file-name {
        /deep/ input {
            padding: 0 5px;
        }

        &.danger /deep/ input {
            color: $danger;
        }

        /deep/ .el-input-group__prepend {
            padding: 0 3px;
        }
        /deep/ .el-input-group__append {
            padding: 0 3px;
        }
    }
}
</style>